<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>体验-购物车</title>
</head>
<body>
   <div id="app">
       <div class="cart">
        <h2>购物车：</h2>
        <ul class="cart-body">
            <li 
            v-for="prod in cart"
            >
            {{prod.id}} - {{prod.title}} - {{prod.price}} -
            <button>-</button>{{prod.amount}}<button @click="add(prod)">+</button> - {{prod.price * prod.amount}} -
            <button @click="removeFromCart(prod.id)">删除</button>
        </li>
        </ul>
       </div>

       <hr>

       <div class="products">
        <h2>推荐商品：</h2>
        <ul class="prod-body">
          <li
            v-for="prod of products"
          >{{prod.id}} - {{prod.title}} - {{prod.price}} - <button v-on:click="addToCart(prod)">加入购物车</button></li>
        </ul>
      </div>
   </div> 


<script src="../lib/vue.js"></script>
<script>
     /**
     * 准备推荐商品的数据
     */
     const _products = new Array(10).fill(null).map((v, i) => ({
      id: i + 1,
      title: '商品标题' + i,
      price: Math.floor((Math.random() * 100) + 50)
    }))

    /**
     * 创建 Vue 实例
     */
 const vm=new Vue({
     el:'#app',
     data: { // 数据，关联的 Model
        products: _products, // 推荐商品
        cart: [], // 购物车数组
        $cart: [],
        _cart: [],
      },
      methods: { // 方法
        // 加入购物车
        addToCart(prod) {
          // 将当前选购商品加入购物车，如果存在，则叠加数量
          const has = this.cart.some(item => item.id === prod.id)
          if (has) {
            this.cart.forEach(item => {
              if (item.id === prod.id) {
                item.amount += 1
              }
            })
          } else {
            this.cart.push({
              ...prod,
              amount: 1
            })
          }
        },
        // 从购物车中删除商品
        removeFromCart(id) {
          this.cart = this.cart.filter(item => item.id !== id)
        },
        // 加数量
        add(prod) {
          prod.amount += 1
        }
      }
    })


</script>

</body>
</html>